<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.List"%>
<%@page import="model.PelaporanBean"%>
<%@page import="DBController.PelaporanDB"%>
<% List listdata = new PelaporanDB().getPelaporanByStatus(1); %>
<% PelaporanBean data; %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>SIPERANAS</title>

        <!-- Bootstrap core CSS -->
        <link href="${initParam.css}/bootstrap.css" rel="stylesheet">
        <link href="${initParam.css}/bootstrap-responsive.min.css" rel="stylesheet">

        <!-- Add custom CSS here -->
        <link href="${initParam.css}/stylish-portfolio.css" rel="stylesheet" >
        <link href="${initParam.fontaw}/css/font-awesome.min.css" rel="stylesheet">
    </head>

    <body>

        <!-- Side Menu -->
        <a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
                <li class="sidebar-brand"><a href="http://startbootstrap.com">Selamat Datang!</a></li>
                <li><a href="#top">Home</a></li>
                <li><a href="#about">Tentang SIPERANAS</a></li>
                <li><a href="#services">Pelaporan</a></li>
                <li><a href="#map-canvas">Lihat Peta</a></li>
                <li><a href="#portfolio">Artikel</a></li>
                <li><a href="#login-register">Masuk / Daftar</a></li>
            </ul>
        </div>
        <!-- /Side Menu -->

        <!-- Full Page Image Header Area -->
        <div id="top" class="header">
            <div class="vert-text">
                <h1>SIPERANAS</h1>
                <h3>Sistem Pelaporan Pencemaran Air Sungai</h3>
                <a href="#about" class="btn btn-primary btn-lg">Pelajari Lebih Lanjut</a>
            </div>
        </div>
        <!-- /Full Page Image Header Area -->

        <!-- Intro -->
        <div id="about" class="intro">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 text-center">
                        <h2>Sistem Pelaporan Pencemaran Air Sungai</h2>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Intro -->

        <!-- Callout -->
        <div class="callout">
            <div class="vert-text">
                <h1>Air adalah Sumber Kehidupan</h1>
            </div>
        </div>
        <!-- /Callout -->

        <!-- Services -->
        <div id="services" class="services">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-md-offset-4 text-center">
                        <h2>Pelaporan Pencemaran Air Sungai</h2>
                        <hr>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-md-offset-2 text-center">
                        <div class="service-item">
                            <i class="service-icon fa fa-pencil-square"></i>
                            <h2>Artikel</h2>
                            <p>Anda dapat membaca artikel mengenai pencemaran sungai, penanganan serta berbagai info mengenai sungai agar dapat terus terpelihara.</p>
                        </div>
                    </div>
                    <div class="col-md-2 text-center">
                        <div class="service-item">
                            <i class="service-icon fa fa-user"></i>
                            <h2>Register & Login</h2>
                            <p>Anda dapat mendaftarkan diri anda dan masuk ke dalam sistem untuk ikut berperan serta memberikan data sungai tercemar.</p>
                        </div>
                    </div>
                    <div class="col-md-2 text-center">
                        <div class="service-item">
                            <i class="service-icon fa fa-map-marker"></i>
                            <h2>Peta Sungai Tercemar</h2>
                            <p>Anda dapat melihat sungai mana saja yang tercemar dan penanganannya.</p>
                        </div>
                    </div>
                    <div class="col-md-2 text-center">
                        <div class="service-item">
                            <i class="service-icon fa fa-check"></i>
                            <h2>Pelaporan yang Valid</h2>
                            <p>Laporan dari masyarakat akan terus di tinjau dan divalidasi, jadi tidak perlu khawatir bahwa pelaporan yang diberikan tidak valid.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Services -->

        <!-- Map -->
        <div id="map-canvas" class="map">
        </div>
        <!-- /Map -->

        <!-- Portfolio -->
        <!-- div id="portfolio" class="portfolio">
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-md-offset-4 text-center">
                        <h2>Kenapa sungai perlu dilestarikan?</h2>
                        <hr>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-md-offset-2 text-center">
                        <div class="portfolio-item">
                            <a href="#"><img class="img-portfolio img-responsive" src="${initParam.img}/portfolio-1.jpg"></a>
                            <h4>Cityscape</h4>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="portfolio-item">
                            <a href="#"><img class="img-portfolio img-responsive" src="${initParam.img}/portfolio-2.jpg"></a>
                            <h4>Is That On Fire?</h4>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-md-offset-2 text-center">
                        <div class="portfolio-item">
                            <a href="#"><img class="img-portfolio img-responsive" src="${initParam.img}/portfolio-3.jpg"></a>
                            <h4>Stop Sign</h4>
                        </div>
                    </div>
                    <div class="col-md-4 text-center">
                        <div class="portfolio-item">
                            <a href="#"><img class="img-portfolio img-responsive" src="${initParam.img}/portfolio-4.jpg"></a>
                            <h4>Narrow Focus</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Portfolio -->

        <!-- Call to Action -->
        <div class="call-to-action" id="login-register">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 text-center">
                        <h3>Ingin bergabung dengan kami ?</h3>
                        <a href="login" class="btn btn-lg btn-default">Masuk</a>
                        <a href="register" class="btn btn-lg btn-primary">Daftar</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Call to Action -->

        <!-- Footer -->
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 text-center">
                        <ul class="list-inline">
                            <li><i class="fa fa-facebook fa-3x"></i></li>
                            <li><i class="fa fa-twitter fa-3x"></i></li>
                            <li><i class="fa fa-dribbble fa-3x"></i></li>
                        </ul>
                        <!-- div class="top-scroll">
                            <a href="#top"><i class="service-icon fa fa-circle-arrow-up scroll fa-3x">&nbsp;</i></a>
                        </div-->
                        <hr>
                        <p>Copyright &copy; SIPERANAS 2013</p>
                    </div>
                </div>
            </div>
        </footer>
        <!-- /Footer -->

        <!-- JavaScript -->
        <script src="${initParam.js}/jquery-1.10.2.js"></script>
        <script src="${initParam.js}/bootstrap.js"></script>

        <!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
        <script>
            $("#menu-close").click(function(e) {
                e.preventDefault();
                $("#sidebar-wrapper").toggleClass("active");
            });
        </script>
        <script>
            $("#menu-toggle").click(function(e) {
                e.preventDefault();
                $("#sidebar-wrapper").toggleClass("active");
            });
        </script>
        <script>
            $(function() {
                $('a[href*=#]:not([href=#])').click(function() {
                    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
                            || location.hostname == this.hostname) {

                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                        if (target.length) {
                            $('html,body').animate({
                                scrollTop: target.offset().top
                            }, 1000);
                            return false;
                        }
                    }
                });
            });
        </script>

        <script>
            jQuery(function($) {
                // Asynchronously Load the map API 
                var script = document.createElement('script');
                script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
                document.body.appendChild(script);
            });

            function initialize() {
                var map;
                var bounds = new google.maps.LatLngBounds();
                
                var styles = [
                    {
                        "featureType": "water",
                        "elementType": "geometry",
                        "stylers": [
                            {"color": "#6a5acd"},
                            {"visibility": "on"},
                            {"weight": 2.1}
                        ]
                    }, {
                        "featureType": "road",
                        "elementType": "geometry",
                        "stylers": [
                            {"visibility": "simplified"}
                        ]
                    }
                ];

                // Create a new StyledMapType object, passing it the array of styles,
                // as well as the name to be displayed on the map type control.
                var styledMap = new google.maps.StyledMapType(styles, {name: "SIPERANAS"});
                        
                var mapOptions = {
                    zoom: 13,
                    center: new google.maps.LatLng(-7.27972, 112.737526),
                    mapTypeControlOptions: {
                        scrollwheel: false,
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'],
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                    }
                };
                
                // Display a map on the page
                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                map.setTilt(45);
                
                map.mapTypes.set('map_style', styledMap);
                map.setMapTypeId('map_style');
                
                // Multiple Markers
                var markers =  [ //looping disini
                    <% for(int i=0; i < listdata.size(); i++){ %>
                        <% data = (PelaporanBean) listdata.get(i); %>
                        ['<%=data.getNamasungai()%>', <%=data.getLokasisungai()%>]
                        <%
                            if(listdata.size()-1 == i){
                            }else{
                                out.print(",");
                            }
                        %>
                    <% } %>
                ];

                // Info Window Content
                var infoWindowContent = [ // looping value
                    <% for(int i=0; i < listdata.size(); i++){ %>
                        <% data = (PelaporanBean) listdata.get(i); %>
                        ['<div class="info_content">' +
                        '<h3><%=data.getNamasungai()%></h3>' +
                        '<p><%=data.getDeskripsi()%></p>' +
                        '<p><b>Status sampah</b> : <%=data.getnAdanyasampah()%></p>'+
                        '<p><b>Status bau sungai</b> : <%=data.getnBausungai()%></p>'+
                        '<p><b>Status warna sungai</b> : <%=data.getnWarnasungai()%></p>'+
                        '<p><b>Suhu sungai</b> : <%=data.getSuhusungai()%> °C</p>'+
                        '<p><b>Ph Air Sungai</b> : <%=data.getPhsungai()%></p>'+
                        '</div>']
                        <%
                            if(listdata.size()-1 == i){
                            }else{
                                out.print(",");
                            }
                        %>
                    <% } %>
                ];

                // Display multiple markers on a map
                var infoWindow = new google.maps.InfoWindow(), marker, i;

                // Loop through our array of markers & place each one on the map  
                for (i = 0; i < markers.length; i++) {
                    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                    bounds.extend(position);
                    marker = new google.maps.Marker({
                        position: position,
                        map: map,
                        title: markers[i][0]
                    });

                    // Allow each marker to have an info window    
                    google.maps.event.addListener(marker, 'click', (function(marker, i) {
                        return function() {
                            infoWindow.setContent(infoWindowContent[i][0]);
                            infoWindow.open(map, marker);
                        }
                    })(marker, i));
                    
                    // Automatically center the map fitting all markers on the screen
                    //map.fitBounds(bounds);
                }

                // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
                /* var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                    this.setZoom(14);
                    google.maps.event.removeListener(boundsListener);
                }); */
                google.maps.event.addListener(map, 'click', function(event) {
                //call function to create marker
                    $("#coordinate").val(event.latLng.lat() + ", " + event.latLng.lng());
                    $("#coordinate").select();
                    
                    //delete the old marker
                    if (marker) { marker.setMap(null); }

                    //add marker onclick
                     marker = new google.maps.Marker({ position: event.latLng, map: map});

                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
        
    </body>
</html>